<template>
	<view>
		<!-- 顶部banner -->
		<view class="wid-100 banner overflow-hidden"><image :src="cateList[0].banner" mode="widthFix" lazy-load></image></view>
		<!-- 列表 -->
		<view class="list-box wid-100 white-bj pad-t-40 pad-b-40 box-sizing mar-top10" :style="{height:swiperHeight+'px'}">
			<scroll-view class="list center first_order" scroll-y @scrolltolower="loadMore">
				<block v-if="list.length>0">
					<view class="item white-bj d-flex" v-for="(item,index) in list" :key="index" @tap="open('shop',item.id,item.type)">
						<view class="pic border-r-15 overflow-hidden"><image :src="item.pic" mode="widthFix" lazy-load></image></view>
						<view class="position-relative mar-left20">
							<view class="font-26 font-w-b title line-h35 mar-top10 text-overflow">{{item.name}}</view>
							<view class="font-22 black60-zt title text-overflow line-h35 mar-top10">{{item.sub_name}}</view>
							<view class="a-end position-absolute p-bottom mar-bottom10">
								<view class="activeColor font-22">¥<text class="font-32 font-w-b">{{item.sell_price}}</text></view>
								<view class="font-22 black50-zt mar-left15">¥{{item.market_price}}</view>
							</view>
						</view>
					</view>
					<!-- 上拉加载 -->
					<load-more :loadText="loadText"></load-more>
				</block>
				<block v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-22 black60-zt text-center">没有更多记录...</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				swiperHeight:500,
				count:0,
				loadText:"上拉加载更多",
				id:undefined,
				cateList:[],
				list:[],
				query:{
					aid:1,
					pid:undefined,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad(e) {
			this.id=parseFloat(e.id)
			this.query.pid=parseFloat(e.id)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(360)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			this.getCate()
			this.getFuShop()
			//开启分享
			wx.showShareMenu({
				withShareTicket:true,
				menus:["shareAppMessage","shareTimeline"]
			})
		},
		//设置分享好友的内容
		onShareAppMessage(res) {
			if (res.from=="button"){
				console.log(res.target)
			}
			return {
				title:"鑫意到家",
				path: '/pages/index/index?rid=',
				desc:"鑫意到家 · 洁新留下！",
				imageUrl:"../../static/202310131154405365.png"
			}
		},
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '鑫意到家 · 洁新留下！',
				type: 0,
				summary: "鑫意到家 · 洁新留下！",
			}
		},
		methods: {
			//设置标题
			navTitle(str) {
				uni.setNavigationBarTitle({
					title: str
				})
			},
			//打开
			open(type,id,lei){
				getApp().open(type,id,lei)
			},
			//获取商品列表
			async getFuShop(){
				await this.$api.GetFuGroupList(this.query).then(res=>{
					if(res.code==0){
						this.list=[...this.list,...res.data.list]
						//计算是否还有
						let total_page=res.count/this.query.limit
						if(Number.isInteger(total_page)==true){
							total_page=total_page
						}else{
							total_page=Math.ceil(total_page)
						}
						if(this.query.page<total_page){
							this.loadText="上拉加载更多"
						}else{
							this.loadText="没有更多记录..."
						}
					}
				})
			},
			//获取栏目
			async getCate(){
				const one={
					aid:1,
					id:this.id,
					status:1,
					pid:-1
				}
				await this.$api.GetShopGroupList(one).then(res=>{
					if(res.code==0){
					  this.cateList=res.data.list
					  this.navTitle(res.data.list[0].name)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.banner{
		height: 350rpx;
	}
	.nothing{
		image{
			width: 40%;
			margin: auto;
		}
	}
	.first_order{
		.item{
			margin-bottom: 50rpx;
			.pic{
				width: 180rpx;
			}
		}
		
	}
</style>
